<script setup>
// 左侧面板
import borderPage from '../generals/borderPage.vue'
import leftEcharts1 from '../echarts/leftEcharts/leftEcharts1.vue'
import leftEcharts2 from '../echarts/leftEcharts/leftEcharts2.vue'
import leftEcharts3 from '../echarts/leftEcharts/leftEcharts3.vue'
import { useCounterStore } from '@/stores'
const data = useCounterStore()

</script>

<template>
  <transition name="left">
    <div v-if="data.animate" id="leftpanel">
      <div class="venue">
        <borderPage>
          <h4>Module title</h4>
        </borderPage>
        <div class="venueecharts">
          <leftEcharts1></leftEcharts1>
        </div>
      </div>

      <div class="population">
        <borderPage>
          <h4>Module title</h4>
        </borderPage>
        <div class="populationecharts">
          <leftEcharts2></leftEcharts2>
        </div>
      </div>

      <div class="electric">
        <borderPage>
          <h4>Module title</h4>
        </borderPage>
        <div class="electricecharts">
          <leftEcharts3></leftEcharts3>
        </div>
      </div>
    </div>
  </transition>

</template>

<style lang="scss" scoped>
#leftpanel {
  position: absolute;
  top: vh(188px);
  left: vw(100px);
  z-index: 1;

  // 表一
  .venue {
    margin-bottom: vh(95px);

    .venueecharts {
      width: vw(371px);
      height: vh(189px);
      // border: 1px solid skyblue;
    }
  }

  // 表二
  .population {
    margin-bottom: vh(69px);

    .populationecharts {
      width: vw(371px);
      height: vh(188px);
      // border: 1px solid skyblue;
    }
  }

  // 表三
  .electric {
    margin-left: vw(31px);

    .electricecharts {
      width: vw(405px);
      height: vh(76px);
      // border: 1px solid skyblue;
    }
  }

  h4 {
    font-size: rem(12.27px);
    font-weight: 400;
    color: #fff;
    margin-left: vw(47px);
    line-height: vh(26px);
  }
}

/* 淡入淡出加滑动效果 */
.left-enter-active,
.left-leave-active {
  transition: opacity 0.5s, transform 0.5s;
}

.left-enter-from {
  opacity: 0;
  transform: translateX(-100px);
}

.left-leave-to {
  opacity: 0;
  transform: translateX(-100px);
}
</style>